<template>
	<view class="">
		<view class="card" v-for="(item,index) in order" :key="index">
			<view class="title x-bc" :showBtn="showBtn" v-if="showBtn">
				<view class="name">订单编号：{{item.order_no || ''}}</view>
				<view class="type">{{item.type || '已支付'}}</view>
			</view>
			<view class="detail pr" @click.stop="jumpProduct(item,index)">
				<image :src="item.pic_url"></image>
				<view class="detail_text">
					<!-- 商品名称和规格 -->
					<view class="name">{{item.spu_name}}</view>
					<view class="text">
						<view class="specifications pr x-bc">
							<view class="parameter">{{item.display_string}}</view>
							<view class="num">*{{item.sale_count || '1'}}</view>
						</view>
					</view>
					<!-- 优惠 -->
					<view class="coupons" v-if="imagelist.length==0">
						<view class="pay pa" v-if="!isCoupons">
							<view class="">实付：<span style="color: #FF2D1B;">{{item.consume_points || 0}}</span>积分 +
								¥<span style="color: #FF2D1B;">{{item.consume_amount || 0}}</span>元</view>
						</view>
						<view class="pay1" :isCoupons="isCoupons" v-if="isCoupons">
							<view class="total">总价5580，</view>
							<text>优惠券抵扣：-500积分</text>
						</view>
					</view>
				</view>
			</view>
			<view class="score x-bc pr" v-if="isCoupons">
				<view class="imagelist">
					<view class="head" v-for="(item,index) in item.memberList">
						<image class="list" :src="item.pic_url" />
					</view>
				</view>
				<view>实付：<span style="color: #FF2D1B;">{{item.consume_points || 0}}</span>积分</view>
			</view>
			<view class="sumbit" :showBtn="showBtn" v-if="showBtn">
				<view class="order_detail x-c" v-if="item.btn_detail == '订单详情'">{{item.btn_detail}}</view>
				<view class="cancel x-c" v-if="item.btn_cancel == '取消订单'">{{item.btn_cancel}}</view>
				<view class="pay_btn x-c" v-if="item.btn_red">{{item.btn_red}}</view>
			</view>
			<view class="sumbit" :showBtn="showBtn" v-if="showBtn">
				<view class="order_detail x-c" @click.stop="jumpDetail(item,index)">订单信息</view>
				<view class="cancel x-c" v-if="item.status == 0 && !item.order_group_no"
					@tap.stop="cancel(item.order_no, index)">取消订单</view>
				<view class="pay_btn x-c" v-if="item.status == 0" @click="pay_money(item)">付款</view>
				<view class="pay_btn x-c" v-if="item.status == 3 || item.group_status == 1"
					@tap.stop="receive(item.order_no, index)">确认收货</view>
			</view>
			<!-- 付款提示框 -->
			<view class="finish_box pf" v-if="finish_status">
				<view class="card pa">
					<view class="name x-c">温馨提示</view>
					<view class="text x-c">是否进行现金支付</view>
					<view class="btn x-ac">
						<view class="cancel" @click="cancelPop">取消</view>
						<view class="finally" @click="finall(item)">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				finish_status: false,
				detail: '/pages/user/order/detail/index',
				no: '', // 订单id
				info: {}, // 订单


			};
		},
		computed: {
			...mapState({
				orderBtn: state => state.order.orderBtn,
			})
		},
		mounted() {
			let arr = [];
			this.$store.dispatch('order/get_orderDetail', arr)
		},
		watch: {},
		methods: {
			// 取消
			cancelPop() {
				this.finish_status = false
			},
			// 完成
			finall(val) {
				this.$api('orderPay', {
					order_no: this.no
				}).then(res => {
					if (res.status) {
						if (res.data != null) {
							// 测试支付通知
							this.$api('payNotify', {
								pay_no: res.data
							}).then(res => {
								// 传递订单信息
								this.$store.dispatch('order/get_pay', this.info)
								this.$Router.push({
									path: '/pages/order/pay/index'
								})
							})
						}
						this.finish_status = false;
						this.$store.dispatch('order/get_paymoney', null)
					}
				})
			},
			// 付款
			pay_money(val) {
				this.finish_status = true;
				this.no = val.order_no
				this.info = val
				this.$emit('ShowPopup')
			},
			// 跳转商品详情;
			jumpProduct(item, index) {
				let obj = {
					"spu_id": item.spu_id.toString(),
					"sku_id": item.sku_id.toString(),
				}
				this.$api('giftinfo', obj).then(res => {
					let goods = res.data;
					this.$store.dispatch('goods/get_goodsInfo', goods).then(res => {
						this.$Router.push({
							path: '/pages/goods/detail/index',
							params: 'params'
						})
					})
				})
				this.$store.dispatch('goods/get_detail', item)

			},
			// 跳转订单详情
			jumpDetail(item, index) {
				if (this.orderBtn == 'myteamDetail') {
					this.$api('orderinfoGroup', {
						order_no: item.order_no
					}).then(res => {
						let arr = res;
						arr.data.group_submit_time = this.$tools.time_data(arr.data.group_submit_time, 'double')
						arr.data.group_validity_time = this.$tools.time_data(arr.data.group_validity_time,
							'double')
						arr.data.submit_time = this.$tools.time_data(arr.data.submit_time, 'double')
						this.$store.dispatch('order/get_orderDetail', arr.data)
					})
				} else {
					this.$api('orderinfo', {
						order_no: item.order_no
					}).then(res => {
						let arr = res
						arr.data.submit_time = this.$tools.time_data(arr.data.submit_time, 'double')
						this.$store.dispatch('order/get_orderDetail', arr.data)
					})
				}
				uni.navigateTo({
					url: this.detail
				})
			},
			// 取消临时订单
			cancel(order_no, index) {
				this.$emit('cancel', order_no, index)
			},
			// 确认订单
			receive(order_no, index) {
				this.$emit('receive', order_no, index)
			}
		},
		props: {
			order: {
				type: Array,
				default: []
			},
			showBtn: { // 隐藏订单信息
				type: Boolean,
				default: false
			},
			pay: { // 应付 实付
				type: String,
				default: ''
			},
			isCoupons: { // 使用优惠券
				type: Boolean,
				default: false
			},
			imagelist: {
				type: Array,
				default: () => []
			}
		},

	};
</script>

<style scoped lang="scss">
	.popup-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.card {
		margin-top: 16rpx;
		padding: 16rpx 24rpx;
		background-color: #fff;
		border-radius: 16rpx;

		.title {
			border-bottom: 1rpx dashed #dcdcdc;
			padding-bottom: 12rpx;
			font-size: 26rpx;

			.name {
				color: #333;
			}

			.type {
				color: #ff2d1b;
			}
		}

		.detail {
			padding: 28rpx 0 26rpx 0;
			display: flex;
			border-bottom: 1rpx dashed #dcdcdc;
			box-sizing: border-box;

			image {
				width: 230rpx;
				height: 188rpx;
				border-radius: 12rpx;
			}

			.detail_text {
				width: 418rpx;
				height: 182rpx;
				padding: 15rpx 0 0 10rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
			}

			.text {
				width: 440rpx;

				.name {
					width: 392rpx;
					font-size: 28rpx;
					color: #333;
				}

				.specifications {
					flex: 1;

					.parameter {
						font-size: 24rpx;
						color: #999;
					}

					.num {
						margin-left: 100rpx;
						font-size: 24rpx;
						color: #999;
					}
				}

			}

			.pay {
				color: #333;
				text-align: right;
				bottom: 10rpx;
				right: 5rpx;
				font-size: 28rpx;
			}

			.pay1 {
				color: #333;
				font-size: 24rpx;
				padding: 0;
				display: flex;

				.total {
					color: #999;
				}

				text {
					color: #FF2D1B;
				}
			}

		}

		// 付款
		.score {
			padding: 16rpx 0 14rpx 24rpx;
			border-bottom: 2rpx dashed #dcdcdc;

			.imagelist {
				display: flex;

				.head+.head {
					margin-left: -20rpx;
				}

				.list {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					border-color: #fff;
					border-width: 4rpx;
					border-style: solid;
				}

				.list+.list {
					margin-left: -15rpx;
				}
			}

			.payscore {
				font-size: 24rpx;
			}
		}

		// 按钮
		.sumbit {
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 0 5rpx 0;

			.order_detail {
				width: 156rpx;
				height: 56rpx;
				border: 1px solid #d9d9d9;
				border-radius: 30rpx;
				color: #333;
			}

			.cancel {
				width: 156rpx;
				height: 56rpx;
				border: 1px solid #d9d9d9;
				border-radius: 30rpx;
				color: #333;
				margin-left: 16rpx;
			}

			.pay_btn {
				margin-left: 16rpx;
				width: 156rpx;
				height: 56rpx;
				border: 1px solid #e93323;
				border-radius: 30rpx;
				color: #e93323;
			}
		}
	}

	// // 积分任务完成弹窗
	.finish_box {
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(#000, 0.1);
		z-index: 1;

		.card {
			background: #fff;
			border-radius: 16rpx;
			left: 10%;
			right: 10%;
			top: 40%;

			.name {
				padding: 40rpx 0 20rpx 0;
				font-size: 34rpx;
				font-weight: 600;
				color: #333;
			}

			.text {
				color: #999;
				padding-bottom: 40rpx;
			}

			.btn {
				border-top: 1px solid #999;
				font-size: 35rpx;
				padding-top: 10rpx;
				padding-bottom: 20rpx;

				&:after {
					content: '';
					position: absolute;
					bottom: 14%;
					left: 45%;
					width: 12%;
					height: 1px;
					background-color: #999;
					transform: rotate(90deg);
				}

				.cancel {}

				.finally {
					color: #e73639;
				}
			}
		}
	}
</style>
